<template class="abc">
	<button @click="goBack">返回</button>
  <h2 class="text">中国京剧知名演员</h2>
  <div class="container" >
	<router-link :to="index.path" v-for="index in de" :key="index.id" >
	  <div class="box">
		  <img :src="index.img" width="200px" height="200px"/>
		  <p>{{index.name}}</p>
	     <p>{{index.time}}</p>
	    <p>{{index.dizhi}}</p>
	  </div>
	</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
		useRouter
	} from 'vue-router';
	const router = useRouter()
const goBack = () => {
		router.back()
	}
const de = ref([
		{
			id: 1,
			name: "梅兰芳",
			img: "/public/r1.png",
			time: "1894.10.22－1961.8.8",
			dizhi: "名澜，乳名裙姊，字畹华，别署缀玉轩主人，艺名兰芳，祖籍江苏泰州。中国京剧演员。",
		},
		{
			id: 2,
			name: "时慧宝",
			img: "/public/r2.png",
			time: "1881—1943年",
			dizhi: "字炳文，号智侬。光绪七年生于北京，工老生，为孙（菊仙）派老生传人。",
		},
		{
			id: 3,
			name: "许荫棠",
			img: "/public/r3.png",
			time: "1852.12.1～1918.3.13",
			dizhi: "男，京剧老生，名德普，字秋山，京兆大兴县人。自幼营业粮行。",
		},
		{
			id: 4,
			name: "俞菊笙",
			img: "/public/r4.png",
			time: "1839年一1914年",
			dizhi: "原籍江苏苏州，生于北京，中国京剧演员，工武生。",
		},
		{
			id: 5,
			name: "李洪春",
			img: "/public/r5.png",
			time: "1898年－1991年",
			dizhi: "原名李春才，出生中国北京，祖籍江苏南京，后迁山东省无棣县佘家巷乡李官庄，京剧红生演员。",
		},
		{
			id: 6,
			name: "谭富英",
			img: "/public/r6.png",
			time: "1906.10.15—1977.3.21",
			dizhi: "谱名豫升，小名升格，祖籍湖北江夏（今武昌），谭派老生，谭门第四代嫡传人，四大须生之一，“新谭派”创立者。",
		},
		
	])
</script>
<style scoped>
.text{text-align: center;}
.box{
    background-color: #F8F8F8; /* 设置每个网格项的背景颜色 */
    color: black; /* 设置文字颜色 */
    padding: 20px; /* 设置内边距 */
    text-align: center; /* 文字居中 */
    font-size: 20px; /* 设置字体大小 */
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 50px; /* 设置网格之间的间距 */
}
a{
	text-decoration: none;
}

</style>